<template>
  <ul
    class="collection-list"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-distance="3"
  >
    <router-link
      v-for="c in collection.data"
      :key="c.id"
      :to="{ name: 'post', params: { postId: c.post.postId } }"
    >
      <li class="collection-item">
        <div class="avatar">
          <avatar size="medium" :user="c.post.author"></avatar>
        </div>
        <div class="content">
          <span class="author">{{ c.post.author.nickname }}</span>
          <div class="title">
            {{ c.post.title }}
          </div>

          <span class="time">{{ c.post.createTime | dateFormat }}</span>
        </div>
      </li>
    </router-link>
    <footer-loading
      :loading="collection.loading"
      :noMore="noMore"
    ></footer-loading>
  </ul>
</template>

<script>
import postApi from "@/axios/postApi";
import myTime from "@/filters/MyTime";
import FooterLoading from "@/components/CommonItems/FooterLoading.vue";
export default {
  components: { FooterLoading },
  data() {
    return {
      collection: {
        page: { current: 1, size: 5 },
        data: [],
        loading: true,
      },
    };
  },
  computed: {
    noMore() {
      return (
        (this.collection.page.current == this.collection.page.pages ||
          this.collection.page.pages == 0) &&
        !this.collection.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      this.collection.page.current++;
      this.getList();
    },
    getList() {
      postApi
        .getCollectionByUser({
          current: this.collection.page.current,
          size: this.collection.page.size,
        })
        .then(({ data }) => {
          this.collection.data = this.collection.data.concat(data.data.records);
          this.collection.page.current = data.data.current;
          this.collection.page.total = data.data.total;
          this.collection.page.pages = data.data.pages;
          //关闭加载动画
          this.collection.loading = false;
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/less/common.less";

.collection-list {
  height: 450px;
  overflow-y: scroll;
  .collection-item {
    display: flex;
    justify-content: space-between;
    width: 250px;
    padding: 5px;
    padding-bottom: 10px;
    border-radius: 3px;
    border-bottom: 1px solid @borderBase;
    cursor: pointer;
    &:last-child {
      border-bottom: none;
    }
    &:hover {
      background: @bgGray;
    }

    .avatar {
      margin-right: 10px;
    }
    .content {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;

      & > *:not(:last-child) {
        margin-bottom: 10px;
      }

      .title {
        height: 36px;
        line-height: 18px;
        color: #000;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        word-break: break-word !important;
        word-break: break-all;
        line-break: anywhere;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>